<script setup>
//工程师端的重派处理人
import {ref, defineProps, defineEmits, watch, computed} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const emit = defineEmits()
const props = defineProps({
  resendProcessorsVisiable: Boolean,
  currentEventDetail: Object,
})
const Visiable = ref(false)
const formLabelWidth = '140px'
const response = ref({
  eventId: null,
  processorsId: null,
  estimatedTime: null,
  taskContent: '',
  oldProcessorsId: null
})
watch(() => props.resendProcessorsVisiable, newVal => {
  Visiable.value = newVal;
  if (newVal) {
    response.value.eventId = props.currentEventDetail.event.id;
    response.value.oldProcessorsId = props.currentEventDetail.event.currentProcessorsId;
    //
    response.value.estimatedTime=new Date(+new Date()+8*3600*1000).toISOString().replace('T', ' ').substring(0, 19);
    //不重要值的初始化
    response.value.processorsId=null;
    response.value.taskContent='';
    //获取原处理人账户
    getOldProcessors()
    //初始化处理人
    initProcessors()
    //初始化排除项
    excludeValues.value = [];
    excludeValues.value.push(response.value.oldProcessorsId)
  }
})

const handleClose = () => {
  formRef.value.resetFields()
  emit('close', false);
}

const assignProcessors = () => {
  formRef.value.validate(valid => {
    if (valid) {
      //ElMessage.success("表单验证通过，valid的值为" + valid)

      axios.post('/eventDispose/resendProcessors', response.value).then(resp => {
        ElMessage.success(resp.data)
        handleClose()
      }).catch(err => {
        ElMessage.warning(err.response.data)
      })
    } else {
      //ElMessage.warning("表单验证失败")
    }
  })
}

const disabledDate=time=>{
  return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
}

//处理人相关
const oldProcessors=ref({})
const getOldProcessors=()=>{
  axios.get(`/eventDispose/getProcessorsInfo?processorsId=${response.value.oldProcessorsId}`).then(resp=>{
    oldProcessors.value=resp.data
  }).catch(err=>{
    oldProcessors.value.account=err.response.data
    ElMessage.warning(err.response.data)
  })
}

const options = ref([])
const initProcessors=()=>{
  axios.get('/eventDispose/getAllProcessors').then(resp=>{
    options.value=resp.data
  }).catch(err=>{
    ElMessage.warning(err.response.data)
  })
}

//排除不合理的处理人相关
const excludeValues = ref([]); // 要排除的值
const filteredOptions = computed(() => {
  return options.value.filter(option => !excludeValues.value.includes(option.id));
});

const formRef = ref();
const rules = ref({
  processorsId: [
    {required: true, message: '处理人不能为空', trigger: 'change'}
  ],
  estimatedTime: [
    {required: true, message: '预计完成时间不能为空', trigger: 'change'}
  ],
  taskContent: [
    {required: true, message: '任务内容不能为空', trigger: 'blur'},
    {min: 5, message: '任务内容不少于5个字', trigger: 'blur'}
  ],
})
</script>

<template>
  <el-dialog v-model="Visiable" title="转派处理人" width="500" @close="handleClose">
    <el-form
        :model="response"
        :rules="rules"
        ref="formRef"
    >
      <el-form-item label="原处理人" :label-width="formLabelWidth">
        <el-input
            v-model="oldProcessors.account"
            style="width: 240px"
            disabled
            placeholder="原处理人"
        />
      </el-form-item>
      <el-form-item label="新处理人" :label-width="formLabelWidth" prop="processorsId">
        <el-select v-model="response.processorsId" placeholder="新处理人" style="width: 240px">
          <el-option
              v-for="item in filteredOptions"
              :key="item.id"
              :label="item.account"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="预计完成时间" :label-width="formLabelWidth" prop="estimatedTime">
        <el-date-picker
            v-model="response.estimatedTime"
            type="datetime"
            placeholder="预计完成时间"
            format="YYYY/MM/DD HH:mm:ss"
            value-format="YYYY-MM-DD H:m:s"
            :disabled-date="disabledDate"
        />
      </el-form-item>
      <el-form-item label="任务内容" :label-width="formLabelWidth" prop="taskContent">
        <el-input
            v-model="response.taskContent"
            style="width: 240px"
            :rows="2"
            type="textarea"
            placeholder="任务内容"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="assignProcessors">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>

<style scoped>
/* 对话框标题样式 */
.el-dialog__header {
  background-color: #f5f7fa;
  padding: 20px;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #ebeef5;
}

/* 对话框内容区域样式 */
.el-dialog__body {
  padding: 20px;
}

/* 表单项样式 */
.el-form-item {
  margin-bottom: 20px;
}

/* 表单项标签样式 */
.el-form-item__label {
  font-weight: bold;
  color: #333;
  width: 120px; /* 调整标签宽度 */
}

/* 输入框和选择器样式 */
.el-input,
.el-select {
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  font-size: 14px;
}

/* 禁用输入框样式 */
.el-input.is-disabled {
  background-color: #f5f7fa;
}

/* 日期选择器样式 */
.el-date-editor {
  width: 100%;
}

/* 文本区域样式 */
.el-textarea__inner {
  padding: 10px;
  border-radius: 4px;
}

/* 占位符样式 */
.el-input::placeholder,
.el-textarea__inner::placeholder {
  color: #c0c4cc;
}

/* 对话框底部按钮样式 */
.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  border-top: 1px solid #ebeef5;
}

.dialog-footer .el-button {
  padding: 10px 20px;
  font-size: 14px;
}

.dialog-footer .el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}

.dialog-footer .el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.dialog-footer .el-button {
  background-color: #fff;
  border-color: #dcdfe6;
  color: #606266;
}

.dialog-footer .el-button:hover {
  background-color: #f5f7fa;
  border-color: #c0c4cc;
}
</style>